*{
margin:0;
padding:0;
}


header{

height:140px;
background-image: linear-gradient(red, yellow);
padding:0 50px;
position: sticky;
top: 0;
z-index: 100;



}


.h1{

	font-family: sans-serif;
}
.logo{
width:30%;
float:left;
color:black;
font-weight:bold;
text-transform:uppercase;
line-height:40px;
font-size:20px;
font-family:sans-serif;
}


nav{
width:58%;
float:right;


}
.events {
padding: 10px;
padding-bottom: 5px;
text-align: center;
margin-left: 10%;
margin-right: 10%;
font-family: sans-serif;
background-color: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(4px);	


}

hr.rounded {
  border-top: 2px solid black;
  border-radius: 5px;
}

hr {
	
margin-top: 5px ;
margin-bottom: 5px;
	
}






a:hover{
	color:white;

}

nav ul{
list-style:none;
float:right;
color:black;
}

nav ul li{
display:inline-block;
}

nav ul li a{
text-decoration:none;
color:black;
font-family:sans-serif;
font-weight:bold;
margin:0 10px;
line-height:40px;
text-transform:uppercase;
}

.banner{
height:250px;

background-image:url(banner.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;

}
.coolbutton {

	border: 5x solid black;
	  border-radius: 2px;	
	  padding: 3px;
	  cursor: pointer;
	
}	

.coolbutton:hover {
	
	background-color: lightblue;
	
}

.container {
	

  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid black;
  padding: 10px;
  width: 20%;  
  height: 200px;
  margin-top: 5px;
  margin-bottom: 5px;
  background-color: white;
  border-radius: 5px;
	
}

.container h2 {
	
  font-family: Verdana, sans-serif;
	
}

label, input, select {
	
margin: 10px;
padding: 3px;
	
}

label {
	
font-weight: bold;
	
}

.container img {

width: 100%;	
height: 50%; 
object-fit: cover;
	
}

hr.rounded {
  border-top: 2px solid black;
  border-radius: 5px;
}

hr {
	
margin-top: 5px ;
margin-bottom: 5px;
	
}



.banner img{
width:100%;
height:100%;
}
.compinfo {
	  background-color: #c4c4c4; 
  margin: 10px;
  padding: 20px;
font-size: 30px;
font-family:sans-serif;

}
.compinfo p{





}
	
.content{
padding:5%;
font-family:sans-serif;
}


.content p{
font-size:18px;
line-height:1.7;
font-family:sans-serif;
margin-bottom:25px;
}


footer {
	font-family:sans-serif;
	  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;

padding: 5px;
color: black;
background-image: linear-gradient(yellow, cyan);
font-weight: bold;
text-align: center;


}


div.gallery img{
	width: 300px;
	height: 300px;
	object-fit: cover;
	margin: 5px;
	border-radius: 5px;
	border: 5px;
	border-color: #262626;
	border-style: solid;

}
div.gallery2 img{
	width: 800px;
	height: 300px;
	object-fit: cover;
	margin: 5px;
	border-radius: 50px;
	border: 5px;
	border-color: #262626;
	border-style: solid;

}

.flex-container {
  display: flex;
    background-color: rgba(25,255,255,0)
  
}
.flex-container img {
	
	width: 125px;
	height: 125px;
}



.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;

}
.flex-container {
  display: flex;
  flex-direction: row;
  
	align-items: center;
justify-content: center;

}



@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}





.flex-container2 {
  display: flex;
  background-color: rgba(25,255,255,0)
  
}
.flex-container2 img {
	
	width: 225px;
	height: 225px;
	float: left;
padding: 10px;
}
.flex-container2 p {
	font-size: 15px;
float:right;
padding:10px;

}


.flex-container2 > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;

}
.flex-container2 {
  display: flex;
  flex-direction: column;
  
	align-items: stretch;
justify-content: center;

}



@media (max-width: 800px) {
  .flex-container2 {
    flex-direction: column;
  }
}



.parent {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 5px;
grid-row-gap: 5px;
}

.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 2 / 1 / 3 / 2; }
.div4 { grid-area: 2 / 2 / 3 / 3; }
.div5 { grid-area: 3 / 1 / 4 / 2; }
.div6 { grid-area: 3 / 2 / 4 / 3; }